﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>达内知道注册</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="bower_components/plugins/css/vueAlert.css">
  <link rel="stylesheet" href="css/login.css">
  <script src="bower_components/jquery/dist/jquery.min.js" ></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body class="bg-light">

<div class="container-fluid">
  <div class="row">
    <div class="mx-auto mt-5" style="width: 400px">
      <div class="alsrtInfo" style="display: none">
        <div class="profPrompt_test" ></div>
      </div>
      <h2 class="text-center"><b>达内</b>·知道</h2>
      <div class="bg-white p-4" id="app">

        <p class="text-center"><b>注册新用户</b></p>

        <div id="error" class="alert alert-danger"
             style="display: none"
          v-bind:class="{'d-block': hasError}">
          <i class="fa fa-exclamation-triangle"></i>
          <span v-text="message" >邀请码错误！</span>
        </div>
        <!--  v-on:submit 当表单提交时运行指定方法 -->
        <!--  submit.prevent 阻止表单提交原有的效果  -->
        <form action="/register" method="post"
          v-on:submit.prevent="register">
          <div class="form-group has-icon">
            <input type="text" name="inviteCode" class="form-control" placeholder="请输入邀请码"
               required="required" v-model="inviteCode">
            <span class="fa fa-barcode form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="tel" name="phone" class="form-control" placeholder="请输入手机号"
              pattern="^\d{11}$" required="required"
              v-model="phone">
            <span class=" fa fa-phone form-control-icon"></span>
          </div>

          <div class="form-group has-icon">
            <input type="text" name="nickname" class="form-control" placeholder="请设置昵称，字数为2-20之间"
               pattern="^.{2,20}$" required="required"
            v-model="nickname">
            <span class="fa fa-user form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="password" name="password" class="form-control" placeholder="设置密码6-20个字母、数字、下划线"
               required="required" pattern="^\w{6,20}$"
            v-model="password">
            <span class="fa fa-lock form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="password" name="confirm" class="form-control" placeholder="请再次输入密码"
                    required="required"
                  v-model="confirm">
            <span class="fa fa-lock form-control-icon"></span>
          </div>
          <button type="submit" class="btn btn-primary btn-block btn-flat" >注册</button>
        </form>

        <a href="login.html" class="text-center d-inline-block mt-3">已有账号，立即登录</a>
      </div>
      <!-- /.form-box -->
    </div>
  </div>
</div>
</body>
<!-- 通用js文件,所有页面都引用! -->
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</html>
